<script setup>
import useUserStore from "@/pinia/stores/user";
import {storeToRefs} from "pinia";

const userStore = useUserStore()

const {name, age, address} = storeToRefs(userStore)
const change = () => {
  //写入state
  userStore.name = "马云"
  userStore.age++
  userStore.address = "杭州"
}
const reset = () => {
  // $reset重置
  userStore.$reset()
}
const onPatch = () => {
  // $patch()
  userStore.$patch({
    name: "麻花疼",
    age: 60,
    address: "深圳"
  })
}
const onState = () => {
  // $state替换
  userStore.$state = {
    name: "雷军",
    age: 52,
    address: "武汉"
  }
}
</script>

<template>
  <div class="layui-panel">
    <h1>home组件</h1>
    <h3>name:{{ name }}</h3>
    <h3>age:{{ age }}</h3>
    <h3>address:{{ address }}</h3>
    <button type="button" class="layui-btn layui-btn-normal" @click="change">修改</button>
    <button type="button" class="layui-btn layui-btn-danger" @click="reset">$reset</button>
    <button type="button" class="layui-btn layui-btn-normal" @click="onPatch">$patch</button>
    <button type="button" class="layui-btn layui-btn-normal" @click="onState">$state</button>
  </div>
</template>

<style scoped lang="less"></style>